<template>
  <div>
    <div class="grid-content bg-purple">
      <el-input v-model="filterText" placeholder="请输入筛选信息">
        <el-button slot="append" style="color:#58B7FF"  class="reset-btn" @click="resetFilter()">
          <span>重置</span>
        </el-button>
      </el-input>
    </div>
    </br>
    <div class="el-tree el-tree-list-border" :style="{height:navTreeHeight}" :class="{ 'el-tree--highlight-current': highlightCurrent }">
      <el-tree-node v-for="child in root.childNodes" :node="child" :props="props" :key="getNodeKey(child)" :render-content="renderContent" @node-expand="handleNodeExpand">
      </el-tree-node>
      <div class="el-tree__empty-block" v-if="!root.childNodes || root.childNodes.length === 0">
        <span class="el-tree__empty-text">{{ emptyText }}</span>
      </div>
    </div>
  </div>
</template>
<style>
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #7DD1FF;
}

.el-tree-list-border{
  border-width:0;
  height:100%;
  overflow:auto
}

.reset-btn:active {
  font-size: 1.1em
}
</style>


<script>
import TreeStore from './model/tree-store';
import { t } from 'element-ui/src/locale';
import emitter from 'element-ui/src/mixins/emitter';

export default {
  name: 'NavTree',
  mixins: [emitter],
  components: {
    ElTreeNode: require('./tree-node.vue')
  },

  data() {
    return {
      store: null,
      root: null,
      currentNode: null,
      filterText: '',
    };
  },

  props: {
    data: {
      type: Array
    },
    emptyText: {
      type: String,
      default() {
        return t('el.tree.emptyText');
      }
    },
    nodeKey: String,
    checkStrictly: Boolean,
    defaultExpandAll: Boolean,
    expandOnClickNode: {
      type: Boolean,
      default: true
    },
    autoExpandParent: {
      type: Boolean,
      default: true
    },
    defaultCheckedKeys: Array,
    defaultExpandedKeys: Array,
    renderContent: Function,
    showCheckbox: {
      type: Boolean,
      default: false
    },
    props: {
      default() {
        return {
          children: 'children',
          label: 'label',
          icon: 'icon'
        };
      }
    },
    lazy: {
      type: Boolean,
      default: false
    },
    highlightCurrent: Boolean,
    currentNodeKey: [String, Number],
    load: Function,
    filterNodeMethod: Function,
    accordion: Boolean,
    indent: {
      type: Number,
      default: 16
    },
    navTreeHeight: {
      type: String,
      default: '300px'
    },
    defaultChecked:[String, Number],
  },

  computed: {
    children: {
      set(value) {
        this.data = value;
      },
      get() {
        return this.data;
      }
    }
  },

  watch: {
    defaultCheckedKeys(newVal) {
      this.store.defaultCheckedKeys = newVal;
      this.store.setDefaultCheckedKey(newVal);
    },
    defaultExpandedKeys(newVal) {
      this.store.defaultExpandedKeys = newVal;
      this.store.setDefaultExpandedKeys(newVal);
    },
    currentNodeKey(newVal) {
      this.store.setCurrentNodeKey(newVal);
      this.store.currentNodeKey = newVal;
    },
    data(newVal) {
      this.store.setData(newVal);
    },

    filterText(val) {
      this.filter(val);
    },
    defaultChecked(val) {
      this.getDefaultServerInfo(val);
    },
  },

  methods: {
    filter(value) {
      if (!this.filterNodeMethod) throw new Error('[Tree] filterNodeMethod is required when filter');
      this.store.filter(value);
    },
    getNodeKey(node, index) {
      const nodeKey = this.nodeKey;
      if (nodeKey && node) {
        return node.data[nodeKey];
      }
      return index;
    },
    getCheckedNodes(leafOnly) {
      return this.store.getCheckedNodes(leafOnly);
    },
    getCheckedKeys(leafOnly) {
      return this.store.getCheckedKeys(leafOnly);
    },
    setCheckedNodes(nodes, leafOnly) {
      if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
      this.store.setCheckedNodes(nodes, leafOnly);
    },
    setCheckedKeys(keys, leafOnly) {
      if (!this.nodeKey) throw new Error('[Tree] nodeKey is required in setCheckedNodes');
      this.store.setCheckedKeys(keys, leafOnly);
    },
    setChecked(data, checked, deep) {
      this.store.setChecked(data, checked, deep);
    },
    handleNodeExpand(nodeData, node, instance) {
      this.broadcast('ElTreeNode', 'tree-node-expand', node);
      this.$emit('node-expand', nodeData, node, instance);
    },




    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    resetFilter(){
      this.filterText=''
    },
    getDefaultServerInfo(value){
      this.store.setCurrentNodeKey(value);
    }
  },

  created() {
    this.isTree = true;

    this.store = new TreeStore({
      key: this.nodeKey,
      data: this.data,
      lazy: this.lazy,
      props: this.props,
      load: this.load,
      currentNodeKey: this.currentNodeKey,
      checkStrictly: this.checkStrictly,
      defaultCheckedKeys: this.defaultCheckedKeys,
      defaultExpandedKeys: this.defaultExpandedKeys,
      autoExpandParent: this.autoExpandParent,
      defaultExpandAll: this.defaultExpandAll,
      filterNodeMethod: this.filterNodeMethod,
      defaultChecked: this.defaultChecked
    });

    this.root = this.store.root;
    this.getDefaultServerInfo(this.defaultChecked);
    
  }
};
</script>
